<template>
	<view>
		<view class="footer_box" :class="{ footer_bg: bg }" :style="{paddingBottom:(isios||ishongmeng)?'26rpx':0}">
			<view v-for="(item, index) of navigationList" :key="index" class="footer_item" >
				<view v-if="item.raised" class="footer_raised_item" @click="onRaised">
					<image class="footer_raised_item_image" :src="'/' + item.iconPath" mode="aspectFit"></image>
				</view>
				<view v-else class="footer_nav_item" @click="onPageJump(item.pagePath)">
					<image v-if="item.pagePath == path" class="footer_nav_item_image" :src="'/' + item.selectedIconPath" mode="aspectFit"></image>
					<image v-else class="footer_nav_item_image" :src="'/' + item.iconPath" mode="aspectFit"></image>
					<text class="footer_nav_item_text" :class="[item.pagePath == path ? 'footer_item_text_active' : '']">{{ item.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		bg: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			ishongmeng:false,
			isios:false,
			path: '',
			navigationList: [{
				"pagePath": "pages/index/index",
				"iconPath": "static/img/tabBar/foot_01.png",
				"selectedIconPath": "static/img/tabBar/foot_on01.png",
				"text": "首页"
			},
			// {
			// 	"pagePath": "pages/search/search",
			// 	"iconPath": "static/img/tabBar/foot_02.png",
			// 	"selectedIconPath": "static/img/tabBar/foot_on02.png",
			// 	"text": "搜索"
			// },
			{
				"pagePath": "pages/tuoke/tuoke-main",
				"iconPath": "static/img/tabBar/foot_02_tuoke.png",
				"selectedIconPath": "static/img/tabBar/foot_02_tuoke_on.png",
				"text": "拓客"
			},
			{
				"pagePath": "pages/user/custom/custom",
				"iconPath": "static/img/tabBar/foot_03.png",
				"selectedIconPath": "static/img/tabBar/foot_on03.png",
				"text": "订阅"
			},
			{
				"pagePath": "pages/user/user",
				"iconPath": "static/img/tabBar/foot_04.png",
				"selectedIconPath": "static/img/tabBar/foot_on04.png",
				"text": "我的"
			}
		]
		};
	},
	//第一次加载
	created() {
		if(uni.getSystemInfoSync().platform === 'harmonyos'){
			this.ishongmeng=true;
		}
		//获取所有页面
		let currentPages = getCurrentPages();
		let page = currentPages[currentPages.length - 1];
		this.path = page.route;
		if(uni.getSystemInfoSync().platform === 'ios'){
			this.isios=true;
		}
	},
	//方法
	methods: {
		onPageJump(url) {
			if (this.path !== url) {
				uni.switchTab({
					url: '/' + url
				});
			}
		}
	}
};
</script>
<style lang="scss" scoped>

.footer_box {
	padding: 10rpx 0;
	height: 100rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	z-index: 502;
}

.footer_bg {
	background-color: #FFF;
}
.footer_item {
	position: relative;
	flex: 1;
	// padding-bottom: 26rpx;
}
.footer_nav_item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.footer_nav_item:active {
	background-color: rgba($color: #fff, $alpha: 0.1);
}
.footer_nav_item_text {
	font-size: 28rpx;
	color: #999999;
	margin-top: 6rpx;
}
.footer_item_text_active {
	color: #557fe4;
}
.footer_nav_item_image {
	width: 67rpx;
	height: 45rpx;
}
.footer_raised_item {
	position: absolute;
	top: -40rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 120rpx;
	height: 120rpx;
	background-color: #FFF;
	border-radius: 50%;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	justify-content: center;
}
.footer_raised_item_image {
	width: 70rpx;
	height: 70rpx;
}
.popup_content {
	background-color: #FFF;
	padding: 30rpx;
}
</style>
